<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Customer Registration</title>

</head>
<body>
	<form action="submited.mvc">
		<table>
			<tr>
				<td>Customer Id</td>
				<td><input type="text" id="customerid" name="customerid"
					size=11 />
			</tr>
			<tr>
				<td>Customer Name</td>
				<td><input type="text" id="customername" name="customername"
					size=50 />
			</tr>
			<tr>
				<td>Tax Id</td>
				<td><input type="text" id="taxid" name="taxid" size=11 />
			</tr>
			<tr>
				<td><input type="button" onclick="doAjaxPost()"
					value="Add customer" />
			</tr>
			<tr>
				<td colspan="2"><div id="reslut" style="color: green;"></div></td>
			</tr>

		</table>

	</form>
	<script src="jquery-1.4.min.js" type="text/javascript"></script>



<script type="text/javascript">
	$(document).ready(function() {
		// check name availability on focus lost

	});
	function doAjaxPost() {
		// get the form values
		alert("Hello! I am an alert box!");
		var customerid = $('#customerid').val();
		var customername = $('#customername').val();
		var taxid = $('#taxid').val();
		alert(taxid);
		$.ajax({
			type : "post",
			url : "submited.mvc",
			data : "customerid=" + customerid + "&customername=" + customername
					+ "&taxid=" + taxid,
			success : function(response) {
				// we have the response
				$('#reslut').html(response);
				$('#customerid').val('');
				$('#customername').val('');
				$('#taxid').val('');
			},
			error : function(e) {
				alert('Error: ' + e);
			}
		});
	}
</script>
</body>
</html>